<template>
  <view class="container">
    <!-- 头部选项卡 -->
    <view class="header">
      <block v-for="item in tabs" :key="item.id">
        <view :class="['tab-item', {'active': activeTab === item.id}]" @click="switchTab(item.id)">
          {{item.name}}
          <view class="badge" v-if="item.count > 0">{{item.count}}</view>
        </view>
      </block>
    </view>

    <!-- 笔记页面 -->
    <view v-if="activeTab === 0" class="note-page">
      <view class="search-bar">
        <input class="search-input" placeholder="搜索图书" v-model="noteSearch" />
        <button class="add-btn" @click="addNote">+ 新建笔记</button>
      </view>
      <view class="empty-tip" v-if="filteredNoteBooks.length === 0">
        <image src="/static/404.png" mode="aspectFit" class="empty-img" />
        <text class="empty-text">暂无笔记，快去写一篇吧~</text>
      </view>
      <view class="book-list">
        <view v-for="book in  filteredNoteBooks" :key="book.id" class="book-item" @click="viewBookNotes(book)">
          <image :src="book.cover" class="book-cover" />
          <view class="book-info">
            <view class="title-line">
              <text class="title">{{book.title}}</text>
              <text class="count">{{book.noteCount}}条笔记</text>
            </view>
            <view class="author">{{book.author}}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 书评页面 -->
    <view v-if="activeTab === 1" class="note-page">

      <view class="empty-tip" v-if="filteredReviewBooks.length === 0">
        <image src="/static/404.png" mode="aspectFit" class="empty-img" />
        <text class="empty-text">暂无书评，快去写一篇吧~</text>
      </view>
      <view class="book-list">
        <view v-for="book in filteredReviewBooks" :key="book.id" class="book-item" @click="viewBookReviews(book)">
          <image :src="book.cover" class="book-cover" />
          <view class="book-info">
            <view class="title-line">
              <text class="title">{{book.title}}</text>
              <text class="count">{{book.reviewCount}}条书评</text>
            </view>
            <view class="author">{{book.author}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeTab: 0,
        tabs: [{
            id: 0,
            name: '笔记',
            count: 0
          },
          {
            id: 1,
            name: '书评',
            count: 0
          }
        ],
        noteSearch: '',
        books: []
      }
    },
    computed: {
      filteredNoteBooks() {
        return this.books.filter(book => {
          return book.title.toLowerCase().includes(this.noteSearch.toLowerCase()) ||
            book.author.toLowerCase().includes(this.noteSearch.toLowerCase())
        }).filter(book => book.noteCount > 0)
      },
      filteredReviewBooks() {
        return this.books.filter(book => {
          return book.reviewCount > 0
        })
      }
    },
    methods: {
      async fetchBooks() {
        const {
          data
        } = await uni.$http.get('/book/note-review')
        if (data.code !== 1) throw Error('获取笔记和书评失败')
        this.books = data.data
        this.updateCounts()
      },
      switchTab(tabId) {
        this.activeTab = tabId
      },
      updateCounts() {
        this.tabs[0].count = this.books.filter(book => book.noteCount > 0).length
        this.tabs[1].count = this.books.filter(book => book.reviewCount > 0).length
      },
      viewBookNotes(book) {
        uni.navigateTo({
          url: `/subpkg/book_note/book_note?book=${encodeURIComponent(JSON.stringify(book))}`
        })
      },
      viewBookReviews(book) {
        uni.navigateTo({
          url: `/subpkg/book_review/book_review?book=${encodeURIComponent(JSON.stringify(book))}`
        })
      },
      addNote() {
        uni.navigateTo({
          url: '/subpkg/add_note/add_note'
        });
      }
    },
    onShow() {
      // 每次页面显示时刷新数据
      this.fetchBooks()
    },
  }
</script>

<style lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
  }

  .header {
    display: flex;
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 16px;
      color: #666;
      position: relative;
      padding: 8px 0;

      &.active {
        color: #C00000;
        font-weight: bold;
      }

      .badge {
        position: absolute;
        top: 0;
        right: 20%;
        background-color: #C00000;
        color: white;
        border-radius: 10px;
        font-size: 12px;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        padding: 0 4px;
      }
    }
  }

  .search-bar {
    display: flex;
    padding: 15px;
    background-color: #fff;
    margin-bottom: 1px;

    .search-input {
      flex: 1;
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
      margin-right: 10px;
    }

    .add-btn {
      background-color: #C00000;
      color: white;
      border: none;
      font-size: 14px;
      white-space: nowrap;
    }
  }

  /* 统一的书/笔记/书评列表样式 */
  .note-page {
    flex: 1;
    overflow-y: auto;

    .book-list {
      .book-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        background-color: #fff;
        border-bottom: 1px solid #f0f0f0;

        .book-cover {
          width: 50px;
          height: 70px;
          margin-right: 12px;
          border-radius: 3px;
        }

        .book-info {
          flex: 1;
          overflow: hidden;

          .title-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;

            .title {
              font-size: 16px;
              font-weight: bold;
              color: #333;
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-right: 10px;
            }

            .count {
              font-size: 13px;
              color: #999;
              white-space: nowrap;
            }
          }

          .author {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;

    .empty-img {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
    }

    .empty-text {
      color: #999;
      margin-bottom: 20px;
    }
  }
</style>
